<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>选购电力包</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: 'PingFang-SC-Regular', 'PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;
            line-height: 100%
        }

        html,
        body {
            height: 100%;
            background: #fff;
            font-size: 0.26rem
        }

        a:link,
        a:visited,
        a:hover,
        a:active {
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            color: #262626;
            text-align: center;
            display: inline-block
        }

        a {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        input,
        button,
        textarea,
        select {
            outline: none;
            border: none;
            margin: 0;
            -webkit-tap-highlight-color: rgba(240, 240, 240, 0);
            padding: 0;
        }

        .width100 {
            width: 100%;
        }

        .container {
            min-height: 100%;
            background: #fff;
            color: #262626;
        }

        .textCenter {
            text-align: center
        }

        img {
            font-size: 0;
        }

        #sec1 .title,
        #sec2 .title {
            font-size: 0.28rem;
            color: #999999;
            line-height: 0.3rem;
        }

        #sec1 .val,
        #sec2 .val {
            font-size: 0.28rem;
            color: #262626;
            float: right;
            line-height: 0.3rem;
        }

        #sec1,
        #sec2,
        #sec3,
        #sec4 {
            padding: 0 0.3rem;
            padding-bottom: 0.35rem;
        }

        #sec1>p {
            padding-top: 0.35rem;
            overflow: hidden;
        }

        #sec1>p .priceBox {
            color: #898989;
            font-size: 0.22rem;
        }

        #sec2 {
            border-top: 0.16rem solid#F8F8F8;
        }

        #sec2>p {
            padding-top: 0.4rem;
        }

        #sec2>p .leastDays2 {
            color: #F67311;
        }

        #sec2 {
            padding-bottom: 0.4rem;
        }

        #sec3 {
            border-top: 0.16rem solid#F8F8F8;
        }

        #sec3>.sec3_title {
            font-size: 0.3rem;
            color: #262626;
            padding: 0.29rem 0;
            padding-bottom: 0.2rem;
        }

        .add_days {
            height: 0.83rem;
            position: relative;
        }

        .add_days>.afterInput {
            float: right;
            color: #F19B05;
            font-size: 0.28rem;
            line-height: 0.83rem;
            display: block;
            text-align: right;
            height: 0.83rem;
            overflow: hidden;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 1;
            background: #fff;
        }

        #input_days::-webkit-input-placeholder {
            color: #999999;
            font-size: 0.32rem;
            font-family: 'PingFang-SC-Regular', 'PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;
        }

        #input_days {
            height: 100%;
            border: 0;
            font-size: 0.32rem;
            width: calc(100% - 1.3rem);
        }

        .text_content {
            overflow: hidden;
            border-top: 0.015rem solid#EEEEEE;
        }

        .text_content>span {
            padding-top: 0.26rem;
            color: #898989;
            font-size: 0.22rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .text_content>span:nth-child(2n+1) {
            width: 60%;
            display: block;
            float: left;
        }

        .text_content>span:nth-child(2n+2) {
            width: 40%;
            display: block;
            float: left;
        }

        .text_content>span>.icon {
            margin-left: 0.05rem;
            color: #fff;
            font-size: 0.18rem;
            background: linear-gradient(to right, #FB6A3E, #FF8A50);
            /* 标准的语法 */
            background: -webkit-linear-gradient(to right, #FB6A3E, #FF8A50);
            /* 标准的语法 */
            line-height: 0.25rem;
            padding: 0 0.1rem;
            border-radius: 0.08rem;
        }

        #sec4 {
            border-top: 0.16rem solid#F8F8F8;
        }

        .sec4_title {
            color: #999999;
            font-size: 0.24rem;
            padding: 0.24rem 0;
            line-height: 100%;
        }

        #sec4 label {
            position: relative;
            height: 1.04rem;
            border-top: 0.015rem solid#EEEEEE;
            display: block;
            padding-left: 0.67rem;
        }

        #sec4 label .icon,
        #sec4 label .icon>img {
            width: 0.5rem;
            height: 0.5rem;
            display: inline-block;
        }

        #sec4 label .icon {
            position: absolute;
            ;
            z-index: 1;
            left: 0;
            top: 50%;
            margin-top: -0.25rem;
        }

        #sec4 label .payName {
            font-size: 0.28rem;
            line-height: 1.04rem;
            display: inline-block;
            width: 2.2rem;
        }

        #sec4 label .leastMoney {
            color: #898989;
            font-size: 0.24rem;
            line-height: 1.04rem;
        }

        #sec4 label .check {
            display: inline-block;
            width: 0.36rem;
            height: 0.36rem;
            border-radius: 50%;
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -0.18rem;
            z-index: 1;
            border: 0.015rem solid#D2D2D2;
        }

        #sec4 label input:checked+.check {
            background: url("../../image/add_input_checkstyle.png") center center;
            background-size: cover;
            border: 0;
        }

        #sec4 label input {
            opacity: 0;
            position: absolute;
            z-index: 2;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        #sec4 {
            padding-bottom: 2.4rem;
        }

        #agreements {
            display: block;
            padding: 0 0.3rem;
            color: #898989;
            font-size: 0.24rem;
            overflow: hidden;
            padding-left: 0.56rem;
            position: relative;
        }

        #agreements .check {
            width: 0.26rem;
            height: 0.26rem;
            display: inline-block;
            border-radius: 0.04rem;
            border: 0.01rem solid#D2D2D2;
            position: absolute;
            z-index: 1;
            left: 0.3rem;
            top: 0;
        }

        #agreements>span {
            line-height: 100%;
            float: left;
        }

        #agreements>.text {
            padding-left: 0.1rem;
        }

        #agreements em {
            font-style: normal;
            font-size: 0.24rem;
            color: #ffd203;
            line-height: 0.26rem;
        }

        #agreements input {
            position: absolute;
            z-index: 2;
            left: 0.3rem;
            top: 0;
            width: 0.26rem;
            height: 0.26rem;
            opacity: 0;
        }

        #agreements input:checked+.check {
            background: url("../../image/power_select.png");
            background-size: cover;
            border: 0;
        }

        #payArea {
            position: fixed;
            z-index: 3;
            left: 0;
            bottom: 0;
            height: 1rem;
            border-top: 0.015rem solid#eee;
            width: 100%;
            padding-left: 0.34rem;
            background: #fff;
            overflow: hidden;
        }

        #payArea .price {
            font-size: 0.26rem;
            line-height: 1rem;
            float: left;
        }

        #payArea .totalMoney {
            color: #F67311;
            font-size: 0.3rem;
            line-height: 1rem;
            float: left;
            padding-left: 0.2rem;
        }

        #payArea #submit {
            float: right;
            height: 100%;
            background: #ffd203;
            width: 3.09rem;
            text-align: center;
            line-height: 1rem;
            font-size: 0.3rem;
        }

        .agreementsBox>span:first-child {
            display: inline-block;
            padding-bottom: 0.1rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <section id="sec1">
            <p>
                <span class="title">矿机名称</span>
                <span class="val name machineName"></span>
            </p>
            <p>
                <span class="title">BTC算力</span>
                <span class="val toatlPower"></span>
            </p>
            <p class="showBhpPower" style="display: none;">
                <span class="title">BHP参配算力</span>
                <span class="val toatlBhpPower"></span>
            </p>
            <p>
                <span class="title">预计每日电费</span>
                <span class="val">
                    <span class="btcUnit btcUnitPrice"></span> BTC
                    <span class="priceBox">≈<span class="unitPrice cnyUnitPrice"></span> <span
                            class="priceType">CNY</span></span>
                </span>
            </p>
        </section>
        <section id="sec2">
            <p>
                <span class="title">合约包剩余天数</span>
                <span class="val leastDays">天</span>
            </p>
            <p>
                <span class="title">电费包剩余</span>
                <span class="val leastDays2">天</span>
            </p>
        </section>
        <section id="sec3">
            <p class="sec3_title">充值天数</p>
            <div class="add_days">
                <input type="number" id="input_days" pattern="[0-9]*" placeholder="请输入充值天数">
                <span class="afterInput">剩余天数<span></span></span>
            </div>
            <div class="text_content electric_predicts">
                <!--                <span>充值天数≥60 享<span class="icon"><span class="more60"></span>折</span></span>-->
                <!--                <span>充值天数≥90 享<span class="icon"><span class="more90"></span>折</span></span>-->
                <!--                <span>充值天数≥180 享<span class="icon"><span class="more180"></span>折</span></span>-->
            </div>
        </section>
        <section id="sec4">
            <p class="sec4_title">选择支付方式</p>
            <label for="wallet">
                <input type="radio" name="payType" value="CNY" id="wallet" checked>
                <span class="check"></span>
                <span class="icon">
                    <img src="../../image/iconttnex.png" alt="">
                </span>
                <span class="payName">CNY</span>
                <span class="leastMoney">可用：<span class="cnyMoney"></span></span>
            </label>
            <label for="usdt">
                <input type="radio" name="payType" value="USDT" id="usdt">
                <span class="check"></span>
                <span class="icon"><img src="../../image/usdt.png" alt=""></span>
                <span class="payName">USDT</span>
                <span class="leastMoney">可用：<span class="usdtMoney"></span></span>
            </label>
        </section>
        <!--        <div style="padding-bottom: 1.4rem">-->
        <!--            <label for="agree" id="agreements" style="padding-bottom: 0.05rem">-->
        <!--                <input type="checkbox" name="agree" id="agree">-->
        <!--                <span class="check"></span>-->
        <!--                <span class="text">我同意</span>-->
        <!--                <em class="agreementsBox">-->
        <!--                    <span id="ags"></span>-->
        <!--                </em>-->
        <!--            </label>-->
        <!--        </div>-->
        <div id="payArea">
            <span class="price">总计金额</span>
            <span class="totalMoney">-- CNY</span>
            <span id="submit">立即支付</span>
        </div>
    </div>
</body>

</html>
<script id="md" type="text/html">
    {{~it:item:index}}
        {{?item.predict != 1}}
        <span>充值天数≥{{=item.days}} 享<span class="icon"><span class="more60">{{=item.predict}}</span>折</span></span>
        {{?}}
    {{~}}
</script>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/dotmin.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        var pageParams = JSON.parse(JSON.stringify(api.pageParam));
        var thisMatchine = pageParams.data;//页面矿机参数
        // console.log('机器信息+++++++++'+JSON.stringify(thisMatchine))
        var insuranceContract = thisMatchine.insuranceContract;//协议内容
        var defaultPayType = 'CNY';//默认支付方式
        var predict_electricity_cny = app.sliceNum(thisMatchine.predict_electricity_cny, 2);  //CNY每日电费单价
        var predict_electricity_usdt = thisMatchine.predict_electricity_usdt;//usdt每日电费单价
        var defaultSelPayTypePrice = predict_electricity_cny;//默认选择的支付方式的单价
        $(".cnyUnitPrice").text(predict_electricity_cny);
        $(".priceType").text(defaultPayType);
        var btc_electric_price = app.sliceNum(app.accDiv(predict_electricity_cny, thisMatchine.btcPrice), 8); //btc价格根据CNY价格折算
        $(".btcUnitPrice").text(btc_electric_price);
        var electricity_config = thisMatchine.electricity_config;//天数打折优惠
        // console.log('electricity_config++++'+JSON.stringify(electricity_config));
        var predict_days = Object.keys(electricity_config); //天数数组
        // var predict_values = Object.values(electricity_config);//天数对应的打折值
        function sortNumber(a, b) {//升序
            return a - b
        }
        predict_days.sort(sortNumber);
        var predicts = [];    //打折优惠[{days:60 , predict : 0.05}] 根据天数升序排序
        for (var i = 0; i < predict_days.length; i++) {
            predicts.push({
                days: predict_days[i],
                predict: app.numSub(1, electricity_config[predict_days[i]]),
            })
        }
        var temp = doT.template($("#md").text());
        $(".electric_predicts").html(temp(predicts));
        // $(".more60").text(app.numSub(1, electricity_config['60']));
        // $(".more90").text(app.numSub(1, electricity_config['90']));
        // $(".more180").text(app.numSub(1, electricity_config['180']));
        var machineId = pageParams.machineId;//矿机id
        var order_id = pageParams.order_id;//订单id
        var handsPower = pageParams.handsPower;//到手总算力
        $(".machineName").text(thisMatchine.productName);//矿机名称
        var toEnd = thisMatchine.toEnd;//合约包剩余天数
        $(".leastDays").text(toEnd + '天');//合约包剩余天数
        var eToEnd = thisMatchine.eToEnd;//电费剩余天数
        $(".leastDays2").text(eToEnd + ' 天');//电费剩余天数
        var leastPowerDays = app.numSub(toEnd, eToEnd);//合约包除开电费天数的剩余天数
        var leftPowerDays = app.numSub(toEnd, eToEnd);//合约包除开电费天数的剩余天数
        $(".afterInput>span").text(leftPowerDays + '天');
        $(".toatlPower").text(handsPower);//到手总算力
        $(".toatlBhpPower").text(app.accMul(thisMatchine.num, thisMatchine.bhpPower));
        var inputDays = null;//充值天数
        if (thisMatchine.bhpPower == 1) {
            $(".showBhpPower").show();
            $(".toatlBhpPower").text(app.accMul(thisMatchine.bhpPower, thisMatchine.num));
        }
        //计算总价
        function mathTotalPrice() {
            var sliceNum = defaultPayType === 'CNY' ? 2 : 4;
            var totalMoney;
            if (!inputDays && inputDays < 1) {
                inputDays = 0;
            }
            totalMoney = app.accMoreMul(
                thisMatchine.mine_power, 24, thisMatchine.computingPower, thisMatchine.num, thisMatchine.electric_price[defaultPayType], inputDays
            );
            // machine.mine_power , '24' , machine.computingPower , machine.num , defaultSelPayTypePrice , inputDays
            // console.log('thisMatchine.mine_power++++++++'+thisMatchine.mine_power);
            // console.log('thisMatchine.computingPower++++++++'+thisMatchine.computingPower);
            // console.log('thisMatchine.num++++++++'+thisMatchine.num);
            // console.log('thisMatchine.electric_price[defaultPayType]++++++++'+thisMatchine.electric_price[defaultPayType]);
            // console.log('inputDays++++++++'+inputDays);
            var disaccount = 1;
            for (var i = predict_days.length - 1; i >= 0; i--) {
                if (inputDays >= predict_days[i]) {
                    disaccount = app.numSub(1, electricity_config[predict_days[i]]);
                    break;
                }
            }
            // console.log('totalMoney111+++++++++'+totalMoney);
            // console.log('disaccount+++++++'+disaccount);
            // console.log('totalMoney222+++++++++'+totalMoney);
            totalMoney = app.sliceNum(app.accMul(totalMoney, disaccount), sliceNum); //打折计算电费
            // console.log('totalMoney333+++++++++'+totalMoney);
            totalMoney = totalMoney > 0 ? app.sliceNum(totalMoney, sliceNum) : '0';
            $(".totalMoney").text(totalMoney + defaultPayType);
        }
        //支付方式选择
        $("input[name=payType]").bind('input propertychange change', function () {
            defaultPayType = $(this).val();
            defaultSelPayTypePrice = defaultPayType === 'CNY' ? predict_electricity_cny : predict_electricity_usdt;
            $(".priceType").text(defaultPayType);
            $(".cnyUnitPrice").text(defaultSelPayTypePrice);
            mathTotalPrice();
        });
        //输入绑定
        $("#input_days").bind('input propertychange change', function () {
            var thiz = $(this);
            inputDays = parseInt(thiz.val());
            if (inputDays > leastPowerDays) {
                inputDays = leastPowerDays;
            }
            thiz.val(inputDays);
            var eletricDays = app.accAdd(inputDays, eToEnd);//电费天数
            eletricDays = eletricDays == 'NaN' ? eToEnd : eletricDays;
            leftPowerDays = app.numSub(toEnd, eletricDays);
            $(".afterInput>span").text(leftPowerDays + '天');
            if (inputDays && inputDays > 0) {
                mathTotalPrice();
            }
        });
        //获取余额
        function loadAccount() {
            app.specialCoin(account, function (ret) {
                var payList = ret.data.lists;
                $(".usdtMoney").text(app.sliceNum(payList.USDT, 4));
                $(".cnyMoney").text(app.sliceNum(payList.CNY, 2));
            })
        }
        loadAccount();

        //获取协议 , 绑定点击
        function getAgreements() {
            app.ajaxPro({
                url: "machine/get-slb-contract",
                values: {
                    id: insuranceContract.contract_chinese_id,
                    token: account.token
                },
                openFlower: false
            }, function (ret) {
                console.log('ret++++++++++' + JSON.stringify(ret))
                if (ret.code == 200) {
                    var data = ret.data;
                    var name = data.name;
                    var agContent = data.content;
                    app.listen("okRentMachine", function () {
                        if (!$("#agree").is(":checked")) {
                            $("#agree").prop("checked", true);
                        }
                    });
                    $("#ags").text(name).click(function (e) {
                        //查看协议
                        e.stopPropagation();
                        var param = {
                            dtype: "dialog391",
                            data: {
                                title: name,
                                orderText: agContent,
                                btns: [{
                                    name: "我已阅读并同意",
                                    event: "okRentMachine"
                                }],
                                extra: {}
                            }
                        };
                        app.dialog(param);
                    })
                }
            });
        }
        if (insuranceContract) {
            getAgreements();
        }
        //充值天数少于合约包天数，提示
        var daysLessDialog = {
            dtype: "dialog11",
            data: {
                text: "您当前充值天数＜合约包剩余总天数当电费用完时，矿机将停机没有产出请关注电费包剩余情况，及时充值",
                btns: [{
                    name: "取消",
                    event: "canalOt"
                }, {
                    name: "确定充值",
                    event: "rentOtYes"
                }]
            }
        };
        //充值电费ajax
        function addElectric() {
            app.ajaxPro({
                url: "order/charge-epower",
                values: {
                    token: account.token,
                    order_id: order_id,
                    days_num: inputDays,
                    site: 1,
                    currency: defaultPayType
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    app.toast('充值成功');
                    app.closeW();
                } else {
                    app.toast(ret.message);
                }
            })
        }
        $("#submit").click(function () {
            if (toEnd == 0) {
                app.toast('合约剩余天数为0不可以充值');
                return;
            }
            // if (!$("#agree").is(":checked")) {
            //     app.toast('请同意协议');
            //     return;
            // }
            if (inputDays && inputDays > 0) {
                if (leftPowerDays > 0) {
                    app.dialog(daysLessDialog);
                } else {
                    addElectric();
                }
            } else {
                app.toast('请输入充值天数');
            }
        })
        app.listen('rentOtYes', function () {
            addElectric();
        });
    }
</script>